<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/lib/jquery.min.js"></script>
    <link rel="stylesheet" href="fonts/iconfont.css">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet/less" type="text/css" href="css/xStyle.less"/>
    <script type="text/javascript" src="js/lib/less.js"></script>
</head>
<body>
<div id="xxx1"></div>
<button onclick="test111()">test</button>
</body>
<script type="module">
    import xTable from './js/src/xTable.js';
    import {regionData} from './js/data/data2.js';
    import xTextarea from './js/src/xTextarea.js';
    import {numFormat} from "./js/src/xUtil.js";

    function detail(item) {
        console.log(item);
        return '<div>hahahe</div>';
    }

    function del() {
        console.log("xxxx");
    }

    function setStyle(item) {
        if (item.recy_type001 > 100000)
            return "error";
        else if (item.recy_type001 > 50000)
            return "primary"
        else return "";
    }

    function cb_type002(item) {
        let tmpl = `<span class="{class}" style="padding:4px 0px 4px 15px;margin-right:auto"></span> <span type="data">{data}</span>`;
        if (item.recy_type002 > 100000)
            return tmpl.replace('{class}', 'iUp text-success').replace('{data}', numFormat(item.recy_type002, '#.0'));
        else if (item.recy_type002 > 10000)
            return tmpl.replace('{class}', 'iUp text-warning').replace('{data}', numFormat(item.recy_type002, '#.0'));
        else
            return tmpl.replace('{class}', 'iDown text-danger').replace('{data}', numFormat(item.recy_type002, '#.0'));
        ;
    }


    let tags = ["紫色 purple,绿色 green,红色 volcano", "", "金色 gold,紫色 purple", "金色 gold,青色 cyan", "绿色 green,红色 volcano"]

    for (let i = 0; i < regionData.length; i++) {
        let obj = regionData[i];
        obj.tag = tags[i % 5];
    }


    let summary = function () {
        let summaryData;

        function setSummaryData() {
            let max = regionData[0].recy_type001;
            let min = regionData[0].recy_type001;
            let sum = 0;
            for (let d of regionData) {
                max = d.recy_type001 > max ? d.recy_type001 : max;
                min = d.recy_type001 < min ? d.recy_type001 : min;
                sum += d.recy_type001
            }
            summaryData = {max, min, sum}
        }

        function getSummary() {
            if (!summaryData)
                setSummaryData();
            return summaryData;
        }

        return getSummary;

    }();

    function getMax() {
        return summary().max;
    }

    function getMin() {
        return summary().min;
    }

    function getSum() {
        return summary().sum;
    }

    function viewDetail(data) {
        console.log("view");
    }

    function edit(data) {
        console.log("edit");
    }

    function delete1(data) {
        console.log("del");
    }

    function expand(data) {
        return xTextarea.onlyRender({data: ''});
    }

    function progressStyle(data) {
        if (data.progress < 0.5)
            return "bg-danger progress-bar-striped progress-bar-animated"
        else if (data.progress < 0.8)
            return "bg-warning progress-bar-striped progress-bar-animated"
        else
            return "bg-success progress-bar-striped progress-bar-animated"
    }

    let summaryCfg = [[{"data": "合计:", rowspan: 3, colspan: 2}, {"data": "最高:"}, {
        "data": getMax(),
        format: "#.0",
        colspan: 4,
        align:'right'
    }],
        [{"data": "最小:"}, {"data": getMin(), format: "#.0", colspan: 4,align:'right'}],
        [{"data": "汇总:"}, {"data": getSum(), format: "#.0", colspan: 4,align:'right'}]]

    let tablCfg = {
        el: "xxx1",
        data: regionData,
        pagination: {pageIndex: 1, pageSize: 20, sizeOption: ['10', '20', '50', '100', '200']},
        select: "430102",
        cols: [
            {type: "checkbox", $data: "region_code", width: "3rem"},

            {
                "title": "区域", $data: "region_name",
                align: "left",
                titleAlign: "left",
                $level: "area_level"
            },
            {type: "tag", $data: "tag", "title": "标签", align: "left", filter: true},
            {
                "title": "销售", "children": [
                    {
                        "title": "白系",
                        $data: "recy_type001",
                        style: setStyle,
                        "align": "right",
                        format: "#.0",
                        sort: true,
                        filter: true,
                        DataType: "number"
                    },
                    {
                        "title": "红系",
                        type: "callback",
                        callback: cb_type002,
                        "align": "right"

                    },
                    {"title": "绿系", $data: "recy_type003", "align": "right", format: "#.0", sort: true, filter: true}]
            },
            
            {
                type: "rate", title: "等级", $data: "rate" ,width:"6rem"
            },
            
            {
                type: "progress", title: "进度", $data: "progress", format: "0%", width: "8rem",
                style: progressStyle
            },
            {type: "expand", callback: expand, title: "更多"},
            {
                type: "button", button:
                    [{style: "flat primary", title: "查看", icon: "iView", callback: viewDetail},
                        {style: "flat success", title: "更新", icon: "iEdit", callback: edit},
                        {style: "flat error", title: "删除", icon: "iDelete", callback: delete1}],
                "title": "操作"
            },

        ],
        summary: summaryCfg
    };

    let xt = new xTable(tablCfg);

    window.test111 = function () {
        console.log(xt.getSelect());
    }
</script>
</html>
